
<template>
  <div class="relative">
    <el-dialog  title="查看" :visible="dialogVisible" v-bind:width="width" @close="close">
      <el-row :gutter="4" justify="space-between">
        <el-col :span="12" v-for="(item,index) in columns" :key="index">
          <el-row style="min-height:40px">
            <el-col :span="11" class="title">{{item.title}} : </el-col>
            <el-col v-if="item.type=='img'" :span="13" class="main">
              <span v-if = "!list[item.dataIndex]">-</span>
              <img v-if = "list[item.dataIndex]" class="default-img" @click="onShowImg(list[item.dataIndex])" :src="list[item.dataIndex]" alt="">
            </el-col>
            <el-col v-else-if="!!item.render" :span="13" class="main">
              {{item.render(list) || "-"}}
            </el-col>
            <el-col v-else :span="13" class="main">{{list[item.dataIndex]||'-'}}</el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- <el-row>
      <el-col :span="12" v-for="(item,index) in columns" :key="index">{{`${item.title}: ${list[item.dataIndex]||'-'}`}}</el-col>
    </el-row> -->
      <!-- <span slot="footer" class="dialog-footer">
	  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span> -->
    </el-dialog>

    <div v-if = "!!currentImg" @click = "toggleMaskImg" class="img-mask">
      <img :src="currentImg" alt="">
    </div>
  </div>

</template>
<script>
import Timeline from "./Timeline";

export default {
    //详情封装
    //用法示例：
    name: "viewDetail",
    components:{Timeline},
    data() {
        return {
            // visible:false
            currentImg: "",
        };
    },
    props: {
        list: Object, //数据
        width: String, //弹窗宽度
        columns: Array, //数据名称集合[{title:'姓名',dataIndex:'name',……},
        dialogVisible: {
            type: Boolean,
            default: false
        }, //窗口显示/关闭
        onClose: Function //关闭弹窗的回调
    },
    methods: {
      /**
       * 关闭dialog
       */
        close(e) {
            this.$emit("onClose");
        },
        /**
         * 关闭放大图片
         */
        toggleMaskImg(){
          this.currentImg = "";
        },
        /**
         * 放大图片
         */
        onShowImg(url){
          this.currentImg = url;
        }
    },
    created() {
    }
    // watch:{
    //     dialogVisible:function(val, oldVal){
    //       this.visible=val
    //     }
    // }
};
</script>

<style lang="scss" scoped>
.title {
    font-weight: 500;
    text-align: right;
}
.main {
    padding-left: 4px;
}
.default-img{
  max-width: 180px;
  cursor: pointer;
}
.img-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        max-width: 60vw;
        max-height: 60vh;
    }
}
</style>

